/**
 * @file icon-button
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  PureComponent,
  PropTypes
} from 'react';
import {Renderer, renderChildren} from './renderer';
import * as cx from 'classnames';
import * as omit from 'lodash/omit';
import * as assign from 'object-assign';
import * as schema from './hbox-schema.json';

@Renderer({
  name: 'hbox',
  desc: '...',
  test: /(?:^|\/)hbox$/,
  schema
})
export default class HBoxRenderer extends PureComponent {
  static propTypes = {
    className: PropTypes.string,
    columns: PropTypes.any
  };

  static defaultProps = {
    className: ''
  };

  renderColumn(column, key) {
    const {
      $path
    } = this.props;

    const subProps = omit(this.props, ['className', 'columns', '$path', 'name']);

    return (
      <div
        key={key}
        className={cx('col', !column || typeof column.columnClassName === 'undefined' ? 'wrapper-xs' : column.columnClassName)}
      >
        {renderChildren($path, column, assign(subProps, {
          $index: key
        }))}
      </div>
    );
  }

  render() {
    const {
      className,
      columns
    } = this.props;

    return (
      <div className={cx('hbox', className)}>
        {columns.map((column, key) => this.renderColumn(
          column, key
        ))}
      </div>
    );
  }
}
